<template>
    <div id="AVATER">
        <Navbar>个人信息</Navbar>
        <div id="mymsg">
            <label for="">账号：</label>
            <span>{{userinfo.account}}</span>
            <hr>
            <div id="avatar">
           
            <label for="pic" id="pic-label">+</label>
            <input type="file" id="pic" multiple accept="image/*" @change="chooseImg">
            <br>
            <br>
            <hr>
            <br>
            <button @touchstart="commit">提交</button>
            
            </div>
        </div>
        <div id="logout">
            <button @touchstart="logout">退出登录</button> 
        </div>
    </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import {mapState,mapActions} from 'vuex'
export default {
    components:{
        Navbar,
    },
    data(){
        return{
            pic:""
        }
    },
    methods:{
        chooseImg:function(e){
            this.pic=e.target.files[0];
            var url = URL.createObjectURL(this.pic);
            var label =document.getElementById("pic-label");
            label.style.backgroundImage = "url("+url+")";
            label.textContent = "";
        },
        commit:function(){
                var data = new FormData();
                data.append("avatar",this.pic);
                this.http.post("/api/users/upload",data)
                .then(res=>{
                    layer.msg(res.data.msg);
                });
        },
        logout:function(){
            this.http.get("/api/users/logout")
            .then(res=>{
                layer.msg(res.data.msg);
                if(res.data.msg=="退出成功"){
                    this.$router.push({path:"/"});
                    location.reload();
                }
            })
        },  
    },
    computed:{
        ...mapState([
            "userinfo"
        ]),
    },
    mounted(){
         this.$store.dispatch("requestIsLogin");
    }
}
</script>

<style scoped>
#mymsg{
    padding:40px 20px;
}
#AVATER{
    background-color: #eeeeee;
}
#avatar{
    margin-top:20px;
    text-align: center;
    
}
label{
    font-size: 20px;
}
#pic{
    display: none;
}
#pic-label{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: solid 1px black;
    font-size: 80px;
    text-align: center;
}
.pic-item{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: solid 1px black;
    background-size: 100% 100%;
    vertical-align: top;
    margin-left: 10px;
}
button{
    width:100%;
    height:50px;
    background-color:#cccccc;
    border: 1px #cccccc solid;
    font-size:20px;

}

#logout{
    width:90%;
    position: relative;
    bottom: 10px;
    left: 18px;
}

</style>